<template>
	<view class="chooseCoupon">
		<view class="coupons_list">
			<view class="coupons_item" v-for="(item, index) in couponList.lists" :key="index">
				<view class="coupons_left_price_box fn-cl-F34035">
					<view class="">
						<span class="fn-sz-26">￥</span>
						<span class="fn-sz-52">{{ numberToFix(item.price) }}</span>
					</view>
					<view class="fn-sz-20">满{{ item.full_use }}可用</view>
				</view>
				<view class="coupons_right_date_box">
					<view class="fn-sz-28 mar-bottom-10">有效期</view>
					<view class="fn-sz-24 fn-cl-999999">{{ item.start_date }}至{{ item.end_date }}</view>
				</view>
				<view class="radio_box"><radio @tap="changeRadio(item)" :value="item.id" color="#FED100" style="transform:scale(0.7)" :checked="item.id === current"></radio></view>
			</view>
		</view>
	</view>
</template>

<script>
import com from '../../mixin/index.js';
export default {
	mixins: [com],
	data() {
		return {
			page: {
				page: 1,
				page_size: 12
			},
			couponList: {
				lists: [],
				total: 1,
				total_page: 0
			},
			order_id: '',
			current: -1
		};
	},
	onLoad(val) {
		if (val.order_id) {
			this.order_id = val.order_id;
			this.getCoupon();
		}
		if (val.couId) {
			this.current = val.couId;
		}
	},
	methods: {
		changeRadio(val) {
			console.log(val, '单选点击');
			let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
			let prevPage = pages[pages.length - 2]; //上一页页面实例
			prevPage.$vm.chooseCoupon(val); // 給上一頁綁定方法otherFun,傳參object
			uni.navigateBack();
		},
		getCoupon() {
			this.getList('couponList', 'getCoupon', 'page', { order_id: this.order_id });
		}
	}
};
</script>

<style lang="scss">
.chooseCoupon {
	min-height: 100vh;
	padding: 24rpx;

	.coupons_list {
		.coupons_item {
			display: flex;
			width: 100%;
			height: 184rpx;
			align-items: center;
			background: url('../../static/images/icon/bg_coupons.png') no-repeat;
			background-size: 100% 184rpx;
			box-sizing: border-box;
			padding: 33rpx 30rpx;
			margin-bottom: 17rpx;
			.coupons_left_price_box {
				margin-right: 80rpx;
				flex: none;
			}
			.coupons_right_date_box {
				flex: 1;
			}
		}
	}
}
</style>
